<template>
    <view class="p-box">
        <template v-for="(device, index) in deviceList" :key="device.id">
            <view class="deviceItem">
                <view class="top">
                    <view>
                        设备号：{{ device.id }}<nut-tag class="m-l-10" :type="device.connectStatus == 1 ? 'success' : 'danger'">{{ device.connectStatus == 1 ? '在线' : '离线' }}</nut-tag>
                    </view>
                    <navigator v-if="device.own" :url="'./member/index?id=' + device.id">
                        <LocalImage class='members' src='members.png'></LocalImage>
                    </navigator>
                </view>
                <view class="bottom" >
                    <navigator class="item" :url="'/pages/charge/index?private=1&deviceId=' + device.id">去充电</navigator>
                    <navigator class="item" :url="'/chargeOrder/pages/charging/index?private=1&device=' + device.id">充电中</navigator>
                    <navigator class="item" :url="'./record/index?id=' + device.id">充电记录</navigator>
                    <view v-if="device.own" class="item" @tap="unbind(index)">解绑设备</view>
                    <!-- <nut-button type="warning" size="small" @tap="unbind(index)">解绑设备</nut-button> -->
                </view>
            </view>
        </template>

        <view class='flex-align-items-center scan-button' @tap="scanQr">
            <LocalImage class='scan-icon' src='scan.png'></LocalImage><text class='m-l-10'>扫码绑定设备</text>
        </view>
    </view>
</template>

<script lang="ts" setup>
    import { bindDeviceApi, unbindDeviceApi, listApi } from '@/api/PrivateDevice';
    import LocalImage from '@/components/LocalImage/index.vue'
    import { hideLoading, scanCode, showLoading, showModal, showToast } from '@/utils/framework';
    import { ref } from 'vue';

    const deviceList = ref<any[]>([])

    function queryList(){
        listApi().then(res => {
            deviceList.value = res.data
        })
    }

    function unbind(index:number) {
        showModal({
            title : '确定解绑吗',
            async success({ confirm }) {
                if(confirm) {
                    const r = await unbindDeviceApi(deviceList.value[index].id)
                    if(r.success) {
                        deviceList.value.splice(index, 1)
                        showToast('解绑成功')
                    }else {
                        showToast('解绑失败')
                    }
                }
            }
        })
    }

    function scanQr() { //扫码
        scanCode({
        success: async (res) => {
            let deviceId = res.result
            if(deviceId.indexOf('http') == 0) {
                const url = new URL(deviceId)
                deviceId = url.searchParams.get('deviceNo') || ''
            }

            if(deviceId == '') {
                showModal('设备号不合法')
                return
            }

            showLoading()
            const r = await bindDeviceApi(Number(deviceId))
            hideLoading()
            if(r.success) {
                queryList()
                showToast('绑定成功')
            }else {
                showModal(r.msg)
            }
        }
        })
    }


    queryList()
    

</script>

<style lang="scss" src="./index.scss"></style>